<template>
  <div class="q-analysis-x">
    <n-space justify="center">
      <div style="text-align: center; width: 23vw">
        <n-h3>
          自变量X<br />
          <n-h6 style="color: #999">(一般为样本属性，例如性别，年龄等)</n-h6>
        </n-h3>
      </div>

      <div style="text-align: center; width: 23vw">
        <n-h3>
          因变量Y<br />
          <n-h6 style="color: #999">(您要分析的题目)</n-h6>
        </n-h3>
      </div>
    </n-space>
    <n-space justify="center">
      <div class="q-select">
        <n-select
          v-model:value="selectX"
          :options="selections"
          @update:value="verifyX"
        ></n-select>
      </div>
      <div class="q-swap">
        <n-icon :size="30">
          <swap-horizontal-outline></swap-horizontal-outline>
        </n-icon>
      </div>
      <div class="q-select">
        <n-select
          v-model:value="selectY"
          :options="selections"
          @update:value="verifyY"
        ></n-select>
      </div>
    </n-space>
    <n-space justify="center" style="margin-top: 2vh">
      <n-text v-show="!isShow"> 请选择需要进行交叉分析的选项 </n-text>
      <n-text v-show="!isValid"> 请选择合适的变量进行交叉分析 </n-text>
    </n-space>
    <q-box
      anaType="x"
      :options="options"
      :options2="options2"
      :number="number"
      :bdata="bdata"
      :tdata="tdata"
      :qId="id"
      :selectX="selectX"
      :selectY="selectY"
      v-if="isShow && isValid"
    ></q-box>
  </div>
</template>

<script setup lang="ts">
import { SwapHorizontalOutline } from '@vicons/ionicons5';
import QBox from '../components/QBox.vue';
import { ref, onMounted, computed } from 'vue';
import { Ques } from '@api/question';

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
});

const id = Number(props.id); //问卷id
const ids = ref([]); //题目id集
const titles = ref([]); //题目集
const selectX = ref(null); //选择的题目id
const selectY = ref(null);
const options = ref([]); //选项
const number = ref(0); //作答人数
const options2 = ref([]); //选项
const tdata = ref([]); //表格数据
const bdata = ref([]); //图数据
// 是否显示下方图标
const isShow = computed(() => {
  if (selectX.value !== null && selectY.value !== null) {
    return true;
  } else {
    return false;
  }
});
// 是否可以交叉分析
const isValid = ref(false);

onMounted(() => {
  getIds();
});
const getIds = () => {
  Ques.getIds({
    id: id,
  }).then((res: any) => {
    console.log(res);
    console.log('---get id---');
    ids.value = res.data.data.ids;
    titles.value = res.data.data.titles;
  });
};

const selections = computed(() => {
  let array = [];
  if (titles.value) {
    for (let i = 0; i < titles.value.length; i++) {
      array.push({
        label: titles.value[i],
        value: ids.value[i],
      });
    }
  }
  return array;
});
//ref([
//  {
//    label: '1.啊啊拉拉手榴弹',
//    value: '1',
//  },
//  {
//    label: '2.sajdkjkasd',
//    value: '2',
//  },
//]);
const verifyX = (value: string) => {
  if (value === selectY.value) {
    window.$message.error('题目不能相同');
    selectX.value = null;
  } else {
    if (isShow.value) {
      getData();
    }
  }
};
const verifyY = (value: string) => {
  if (value === selectX.value) {
    window.$message.error('题目不能相同');
    selectY.value = null;
  } else {
    if (isShow.value) {
      getData();
    }
  }
};

const xList = ref([]);
const yList = ref([]);
const getData = () => {
  xList.value[0] = selectX.value;
  yList.value[0] = selectY.value;
  Ques.analyzeQX({
    id: id,
    x: xList.value[0],
    y: yList.value[0],
  }).then((res: any) => {
    if (res.data.status === 200) {
      isValid.value = true;
      options.value = res.data.data.options1;
      number.value = res.data.data.number;
      options2.value = res.data.data.options2;
      tdata.value = res.data.data.tdata;
      bdata.value = res.data.data.bdata;
      console.log('options2.value', options2.value);
    } else {
      window.$message.error(res.data.msg);
      isValid.value = false;
    }
  });
};
</script>

<style scoped lang="scss">
.q-analysis-x {
  width: 80%;
  margin: auto;
  border: solid 1px rgb(238, 238, 238);
  border-radius: 1vh;
  background-color: #fff;
  min-height: 60vh;
  box-shadow: 3px 3px 5px #c8c8c8, -3px -3px 5px #ececec;
  padding: 3vh 0;
  // padding: 2vh;
  // background-color: #f1f1f1;
  .q-select {
    width: 20vw;
  }
  min-height: 20vh;
}
</style>
